<html>
<head>
<title>MarkerIconOptions Wizard</title>
 <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css">
 <style type="text/css">
  td {
    border: 0px none;
  }
  table {
    border: 0px none;
  }
 </style>
 <script type="text/javascript"  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q">
 </script>
 <script src="../src/mapiconmaker.js" type="text/javascript"></script>
 <script src="colorselector/colorselector.js" type="text/javascript"></script>
<script type="text/javascript">
var iconOptions = {
  width: "32",
  height: "32",
  primaryColor: "ff0000",
  cornerColor: "ffffff",
  strokeColor: "000000"
};
var map = null;
function changeColor(colorHex) {
  iconOptions.primaryColor = colorHex;
  updateImage();
}

function changeCornerColor(colorHex) {
  iconOptions.cornerColor = colorHex;
  updateImage();
}

function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    updateImage();
  }
}

function updateImage() {
  map.clearOverlays();
  iconOptions.width = document.getElementById("markerWidth").value;
  iconOptions.height = document.getElementById("markerHeight").value;
  iconOptions.primaryColor = document.getElementById("primaryColor").value + "FF";
  iconOptions.cornerColor = document.getElementById("cornerColor").value + "FF";
  iconOptions.strokeColor = document.getElementById("strokeColor").value + "FF";
  var icon = MapIconMaker.createMarkerIcon(iconOptions);

  // Make an image from the foreground of the marker
  document.getElementById("marker").innerHTML = "";
  var img = document.createElement("img");
  img.setAttribute("src", icon.image);
  document.getElementById("marker").appendChild(img);

  // Modify the generated code with the new options
  document.getElementById("p_width").innerHTML = iconOptions.width;
  document.getElementById("p_height").innerHTML = iconOptions.height;
  document.getElementById("p_primaryColor").innerHTML = iconOptions.primaryColor;
  document.getElementById("p_strokeColor").innerHTML = iconOptions.strokeColor;
  document.getElementById("p_cornerColor").innerHTML = iconOptions.cornerColor;

  // Add 10 markers to the map at random locations
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 10; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                            southWest.lng() + lngSpan * Math.random());
    map.addOverlay(createMarker(point, icon));
  }
}

function createMarker(point, icon) {
  var marker = new GMarker(point, {icon: icon, draggable:true});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Test");
  });
  return marker;
}
</script>
</head>
<body style="font-family: Arial, sans serif" onload="load()">

<h2>MarkerIconOptions Wizard</h2>

<h3><img src="http://www.google.com/uds/solutions/wizards/img/1b.gif" style="vertical-align: middle;"> Specify size and color options</h3>

<table>
<tr>
<td colspan="3">
Width: 
<input type="text" size="3" id="markerWidth" value="32"/>
&nbsp;  &nbsp;
Height: 
<input type="text" size="3" id="markerHeight" value="32"/>
</td>
</tr>
<tr>
<td>
Primary color:
<input type="text" class="color" onchanged="updateImage()" id="primaryColor" value="#FFFF00">
</td>
<td>
Corner color:
<input type="text" class="color" onchanged="updateImage()" id="cornerColor" value="#ff8a00">
</td>
<td>
Stroke color:
<input type="text" class="color" onchanged="updateImage()" id="strokeColor" value="#FF0000">
</td>
</tr>
<tr>
<td colspan="3" valign="top">
<input type="button" onclick="updateImage()" value="Update & Preview Marker"/>
<br/><br/> 
<div id="marker" style="height: 50px"></div>
<div id="map" style="width: 500px; height: 300px"></div>
</td>
</tr>
</table>
<h3><img src="http://www.google.com/uds/solutions/wizards/img/2b.gif" style="vertical-align: middle;"> Get the Code</h3>
<pre class="code" style="width: 700px; overflow-x: scroll;">
  var iconOptions = {};
  iconOptions.width = <span id="p_width"></span>;
  iconOptions.height = <span id="p_height"></span>;
  iconOptions.primaryColor = "<span id="p_primaryColor"></span>";
  iconOptions.cornerColor = "<span id="p_cornerColor"></span>";
  iconOptions.strokeColor = "<span id="p_strokeColor"></span>";
  var icon = MapIconMaker.createMarkerIcon(iconOptions);
</pre>
</body>
</html>
